<template>
<div>
  <div class="top">
    <div class="left"><img src="@/assets/logo.png" alt="" /></div>
    <div class="right">
      <p>
        <i class="iconfont top-i icon-user"></i> <br /><span class="r-zi"
      >我的</span
      >
      </p>
      <p>
        <i class="iconfont top-i icon-nav"></i> <br /><span class="r-zi"
      >导航</span
      >
      </p>
    </div>
  </div><!--  头部结构-->
  <div class="content"><!--流程图-->
    <img src="../assets/process/process1.jpg" alt="">
    <img src="../assets/process/process2.jpg" alt="">
    <img src="../assets/process/process3.png" alt="">
    <img src="../assets/process/process4.jpg" alt="">
    <p>NO.1&ensp;收房验房</p>
    <p>NO.2&ensp;装修预算</p>
    <p>NO.3&ensp;装修风水</p>
    <p>NO.4&ensp;装修设计</p>
    <p>NO.5&ensp;材料选择</p>
    <p>NO.6&ensp;水电工程</p>
    <p>NO.7&ensp;泥木工程</p>
    <p>NO.8&ensp;油漆工程</p>
    <p>NO.9&ensp;装修验房</p>
    <p>NO.10&ensp;去污保洁</p>
    <p>NO.11&ensp;软装搭配</p>
    <p>NO.12&ensp;家居生活</p>
  </div>
  <Myfoot></Myfoot>
  

</div>
</template>

<script>
import Myfoot from '@/components/Myfoot'
export default {
  name: "Process",
  components:{
    Myfoot,
  }
}
</script>

<style scoped lang="scss">
.top,//30-44是头部的样式
.right {
  background-color: #fff;
  display: flex;
  justify-content: space-between;
}
.left {
  img {
    margin-left: 18px;
    margin-top: 16px;
    width: 120px;
    margin-bottom: 16px;
  }
}
.right {
  p {
    margin: 5px 10px;
  }
  text-align: center;
  .r-zi {
    font-size: 22px;
    color: #999;
  }
  .top-i {
    font-size: 22px;
    color: #999;
    margin-bottom: 18px;
  }
}//头部样式结束
//以下流程图样式
.content {
  width: 100%;
  background-color: #f4f4f4;
  img {
    width: 100%;
    height: 100%;
    float: left;
    margin-bottom: 10px;
  }
  p {
    position: absolute;
    &:nth-child(5){
      top: 295px;
      left: 100px;
    }
    &:nth-child(6){
      top: 375px;
      left: 165px;
    }
    &:nth-child(7){
      top: 455px;
      left: 100px;
    }
    &:nth-child(8){
      top: 535px;
      left: 165px;
    }
    &:nth-child(9){
      top: 725px;
      left: 165px;
    }
    &:nth-child(10){
      top: 810px;
      left: 100px;
    }
    &:nth-child(11){
      top: 890px;
      left: 165px;
    }
    &:nth-child(12){
      top: 970px;
      left: 100px;
    }
    &:nth-child(13){
      top: 1170px;
      left: 100px;
    }
    &:nth-child(14){
      top: 1250px;
      left: 165px;
    }
    &:nth-child(15){
      top: 1325px;
      left: 100px;
    }
    &:nth-child(16){
      top: 1405px;
      left: 165px;
    }
  }
}
//以下是文本区域

</style>